import utilStyles from '../../styles/utils.module.css'
import cx from 'clsx';
import Link from 'next/link'
import Date from '../date'
import { Typography, Card, CardMedia, CardContent, Chip } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles';
import TextInfoContent from '@mui-treasury/components/content/textInfo';
import { useBlogTextInfoContentStyles } from '@mui-treasury/styles/textInfoContent/blog';
import { useOverShadowStyles } from '@mui-treasury/styles/shadow/over';

const useStyles = makeStyles(({ breakpoints, spacing, palette }) => {
  return ({
    root: {
      margin: 'auto',
      // marginLeft: spacing(5),
      marginBottom: spacing(5),
      borderRadius: spacing(2), // 16px
      transition: '0.3s',
      boxShadow: '0px 14px 80px rgba(34, 35, 58, 0.2)',
      position: 'relative',
      overflow: 'initial',
      background: palette.background.paper,
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      paddingBottom: spacing(2),
      [breakpoints.up('md')]: {
        marginLeft: spacing(5),
        flexDirection: 'row',
        paddingTop: spacing(2),
      },
    },
    media: {
      width: '88%',
      marginLeft: 'auto',
      marginRight: 'auto',
      marginTop: spacing(-3),
      height: 0,
      paddingBottom: '48%',
      borderRadius: spacing(2),
      backgroundColor: '#fff',
      position: 'relative',
      transition: '0.5s',
      filter: palette.type === 'dark'
        ? 'brightness(0.3)'
        : 'none',
      [breakpoints.up('md')]: {
        width: '50%',
        marginLeft: spacing(-3),
        paddingBottom: '30%',
        marginTop: 0,
        transform: 'translateX(-8px)',
      },
      '&:after': {
        content: '" "',
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        backgroundImage: 'linear-gradient(147deg, #e4a61b8c 0%, #12b2ff78 74%)',
        borderRadius: spacing(2), // 16
        opacity: 0.5,
      },
    },
    content: {
    },
    cta: {
      marginTop: 24,
      textTransform: 'initial',
    },
    tag: {
      marginRight: '10px'
    }
  })
});
export default function ({ id, date, title, abstract, image, tags }) {
  console.log(image)
  const styles = useStyles();
  const {
    button: buttonStyles,
    ...contentStyles
  } = useBlogTextInfoContentStyles();
  const shadowStyles = useOverShadowStyles();
  const a = <li className={utilStyles.listItem} key={id}>
    <Link href={`/posts/${id}`}>
      <a>{title}</a>
    </Link>
    <br />
    <Typography variant='body1'>{abstract}</Typography>
    {/* tags */}
    <small className={utilStyles.lightText}>
      <Date dateString={date} />
    </small>
  </li>
  return <Card className={cx(styles.root, shadowStyles.root)}>
    <CardMedia
      className={styles.media}
      image={`${image}`}
    />
    <CardContent style={{ width: '88%' }}>
      <TextInfoContent
        className={styles.content}
        classes={contentStyles}
        overline={date}
        heading={<Link href={`/posts/${id}`}>
          <a>{title}</a>
        </Link>}
        body={abstract}
      />
      <div>
        {
          tags.map(tag => <Chip className={styles.tag} color="primary" label={tag} />)
        }
      </div>
    </CardContent>
  </Card>
}
